<template>
  <div>
    <el-dialog
      :title="this.$t('ExpressOrderManagementLang.issueAccounts')"
      :visible.sync="Visible"
      width="1100px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div class="dialogBox top">
          <div class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{edit_time_title}}:
              </div>
              <div class="contant">
                <el-date-picker
                  ref="track_at"
                  class="Required" 
                  @blur="Blur('track_at')"
                  @focus="Focus('track_at')"
                  v-model="data.track_at"
                  value-format="timestamp"
                  type="date"
                  :placeholder="$t('common.select_plactholder')"
                >
                </el-date-picker>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogBox top">
          <MyTable
            :gridOptions="{
              checkboxConfig: { checkField: 'checked', trigger: 'row', highlight: true,checkMethod:checkSelectable }
            }"
            :tableColumn="tableColumn"
            :tableData="tableData"
            :isOrder="false"
            @sendCheckBoxList="setCheckBox"
          >
            <template v-slot:content="scope">
              <span>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 接收绑定参数
    midHight: [Number,String],
  },
  data() {
    return {
      Visible: false,
      dataObj:{},
      title:'',
      edit_time_title:'',
      data:{
        track_at:"",
        state:"",
      },
      tableColumn: [
        {
            type: 'checkbox',
            width: 40
        },
        {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.Ticket_number'),
            prop: 'ticket_num',
            order: '',
            width: 150
        },
        {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.Shipper'),
            prop: 'order_uid_name',
            order: '',
            width: 150
        },
        {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.Origin'),
            prop: 'start_local_name',
            order: '',
            width: 120
        },
        {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.destination'),
            prop: 'target_local_name',
            order: '',
            width: 120
        },
        {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.Number_packages'),
            prop: 'package_num',
            order: '',
            width: 80
        },
        {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.weight'),
            prop: 'weight',
            order: '',
            width: 80
        },
        {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.volume'),
            prop: 'volume',
            order: '',
            width:80
        }
      ],
      tableData: [],
      sendDataArr:[],
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  methods: {
   
    init(dataObj,title) {
      this.dataObj=dataObj
      this.title=title
      if(title=='运达'){
        this.title=this.$t('ExpressCargoManagementLang.transport')
        this.edit_time_title=this.$t('ExpressCargoManagementLang.transport_time')
        this.data.state=6
      }
      this.getData()
      this.Visible = true;
    },
    //获取下拉单数据
    getOptions(){
      this.$get("lineSysItems").then((res) => {
        this.options_IsBrand = res.data.is_brand;
        this.options_insure = res.data.line_type;
        this.options_protection = res.data.premium_type;
      });
      this.$get("freightSysItems").then((res) => {
        this.options_Unit_price = res.data.price_type;
      });
    },
    //获取单条
    getData() {
      this.$get('getAllocationOrder', { allocation_number: this.dataObj.allocation_number,start_local:this.dataObj.start_local }).then((res) => {
        this.tableData=res.data
      });
    },
    setCheckBox(data) {
      this.sendDataArr = data;
    },
    // 提交修改
    confirm() {
      let type=true
      if(!this.data.track_at){
        this.$refs.track_at.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(this.sendDataArr.length==0){
        this.$message.warning(this.$t('ExpressBatchLang.message1'));
        type=false
      }
      // 是否有空值必选项标识
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000)
        let str=this.sendDataArr.map((obj)=>{return ""+obj.order_sn}).join(",")
        let params = new FormData();
        params.append("allocation_number", this.dataObj.allocation_number);
        params.append("track_at", this.data.track_at/1000);
        params.append("state", this.data.state);
        params.append("order_sn", str);
        this.$postForm("editAllocationState", params).then((res) => {
          this.confirmTrue=true
          if(res.success){
            this.$message.success(res.msg);
            this.$emit("success");
            this.cancel()
          }
        });
      }
    },
    //取消修改
    cancel() {
      this.data={
        track_at:"",
        state:'',
      } 
      this.dataObj={}
      this.title=''
      this.edit_time_title=''
      this.tableData=[] 
      this.sendDataArr=[]
      this.Visible = false;
    },
    // 判断了时间组件内容是否有东西
    Focus(name) {
      let dom = this.$refs[name].$el.childNodes[1]
      dom.style.border = "1px solid #E0E3E9";
      
    },
    Blur(name) {
      let dom = this.$refs[name].$el.childNodes[1]
      if (!this.data[name]) {
        dom.style.border = "1px solid red";
      }
    },
    //多选框禁选
    checkSelectable({row}) {
        return row.trans_status===4
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  .dialogBox .dialogBoxItem .dialogBoxItemRow {
    flex-direction: row;
  }
</style>